<template>
	<view class="register-page">
		<view class="register-container">
			<!-- 注册标题 -->
			<view class="title">注册</view>

			<!-- 用户名输入框 -->
			<input v-model="username" placeholder="请输入用户名" class="input-item" />

			<!-- 密码输入框 -->
			<input v-model="password" type="password" placeholder="请输入密码" class="input-item" />

			<!-- 确认密码输入框 -->
			<input v-model="confirmPassword" type="password" placeholder="请确认密码" class="input-item" />

			<!-- 注册按钮 -->
			<button @click="handleRegister" class="register-btn">注册</button>

			<!-- 已有账号链接 -->
			<view class="login-link" @click="goToLogin">
				已有账号？去登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				confirmPassword: ''
			}
		},
		methods: {
			handleRegister() {
				// 验证信息是否填写完整
				if (!this.username || !this.password || !this.confirmPassword) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				// 验证两次密码是否一致
				if (this.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return
				}
				// 显示加载弹窗
				uni.showLoading({
					title: '注册中...'
				})
				console.log("点击注册，准备调用接口发送数据");
				uniCloud.callFunction({
					name:'addUser',
					data:{
					     'name':this.username,
						 'password':this.password
					},
					success: (msg) => {
						console.log("addUser CallBack"+msg);
					}
				})
				// 模拟注册请求（实际项目替换为接口调用）
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					})
					// 注册成功后返回上一页
					uni.navigateBack();
				}, 1000)
			},
			// 跳转到登录页
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login' // 替换为你的登录页路径
				})
			}
		}
	}
</script>

<style scoped>
	/* 页面容器：居中+背景 */
	.register-page {
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		/* 参考图背景为白色 */
		padding: 20rpx;
	}

	/* 表单容器：宽度适配 */
	.register-container {
		width: 100%;
		max-width: 600rpx;
		/* 适配不同屏幕 */
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	/* 注册标题 */
	.title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
	}

	/* 输入框样式 */
	.input-item {
		height: 80rpx;
		border: 1px solid #e5e5e5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	/* 注册按钮 */
	.register-btn {
		height: 80rpx;
		background-color: #1677ff;
		/* 参考图的蓝色按钮 */
		color: #fff;
		border-radius: 8rpx;
		font-size: 32rpx;
		border: none;
	}

	/* 去登录链接 */
	.login-link {
		font-size: 26rpx;
		color: #1677ff;
		text-align: center;
		margin-top: 10rpx;
	}
</style>